<template>
	<view :class="{minePage:true, weaterBack:changeNow}" @click.stop="addShow('close')">
		<image src="../../static/image/homeBack.jpg" mode="aspectFill" :class="{backImg:true,backImgNot:changeNow}"></image>
		<view class="mineView">
			<scroll-view style="height: 100%; width: 100%;overflow: hidden;" 
				scroll-y="true" 
				refresher-enabled="true"
				:refresher-triggered="isLoading" 
				:refresher-threshold="100" 
				refresher-default-style="white"
				refresher-background="rgba(255, 255, 255, 0)"
				@refresherpulling="onPulling" 
				@refresherrefresh="onRefresh" 
				@refresherrestore="onRestore"
				@refresherabort="onAbort">
				<view class="maieContent">
					<view class="mineHeader">
						<view :class="{blockAdd:true, isaddStyle:isadd === 1, noaddStyle:isadd === 2}" @click.stop="addShow">
							<image src="../../static/image/add.png" style="height: 100%;width: 100%;position: absolute;"></image>
						</view>
						<view :class="{addView:true, addView1:addShowNow}">
							<view class="addItem" @click="openSay">使用说明</view>
							<view class="addItem" @click="goBillingManagement('change')">账单管理</view>
							<view class="addItem" @click="goBillingManagement('export')">导出账单</view>
							<view @click="openTypePopup">账单类型管理</view>
						</view>
					</view>
					<view class="mineCenter">
						<mineCenterPage v-on:changeBack="changeBack" :msg="msg" ref="weatherBlock"></mineCenterPage>
					</view>
				</view>
			</scroll-view>
		</view>
		<typePopup ref="popupShow"></typePopup>
		<userTalk ref="uesrPopupShow"></userTalk>
	</view>
</template>

<script>
	import mineCenterPage from './mineCenterPage'
	import typePopup from '../../components/typePopup.vue'
	import userTalk from '../../components/userTalk.vue'
	export default {
		components: {
			mineCenterPage,
			typePopup,
			userTalk
		},
		data() {
			return {
				isLoading: false,
				liadingTimer: null,
				isadd: 0,
				addShowNow: false,
				changeNow: false,
				msg:'',
			}
		},
		methods: {
			openSay(){
				this.$refs.uesrPopupShow.openPopup(true)
			},
			goBillingManagement(key){
				uni.navigateTo({
					url: '../BillingManagement/billingManagement?key=' + key
				});
			},
			openTypePopup(){
				this.$refs.popupShow.getRegionList(1)
			},
			getBooksData(){
				this.$refs.weatherBlock.getBooksData()
			},
			getWeather(){
				this.$refs.weatherBlock.getWeather()
			},
			changeBack(val){
				if(val === 'weatherChangeBig'){
					if(this.addShowNow){
						this.isadd = 2
						this.addShowNow = false
						setTimeout(()=>{
							this.changeNow = true
							this.isadd = 1
						},200)
					}else{
						this.changeNow = true
						this.isadd = 1
					}
					this.$emit('changeTab','weatherChangeBig')
				}
				this.msg = val
			},
			addShow(val){
				if(val === 'close'){
					if(this.addShowNow){
						this.addShowNow = false
						this.isadd = 2
					}
					return
				}
				if(this.isadd === 0 || this.isadd === 2){
					this.isadd = 1
					if(!this.changeNow){
						this.addShowNow = true
					}
				}else{
					this.isadd = 2
					this.addShowNow = false
					if(this.changeNow){
						this.changeNow = false
						this.msg = 'weatherChangeSmall'
						this.$emit('changeTab','weatherChangeSmall');
						setTimeout(()=>{
							this.msg = ''
						},200)
					}
				}
			},
		    onPulling(e) {
				this.isLoading = true
				if(!this.changeNow){
					if(this.isadd === 0){
						this.isadd = 0
					}else{
						this.isadd = 2
					}
					this.addShowNow = false
				}
		    },
		    onRefresh() {
				let that = this
				if(that.liadingTimer){
					clearTimeout(that.liadingTimer)
					that.liadingTimer = null
				}
				that.liadingTimer = setTimeout(() => {
					that.getBooksData()
					that.isLoading = false
				},2000)
		    },
		    onRestore() {
				this.isLoading = false
		    },
		    onAbort() {
				this.isLoading = false
		    }
		}
	}
</script>

<style>
	.minePage {
		position: relative;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(167, 164, 159, 1.0);
		transition: background 0.4s ease-in-out,
	}
	
	.weaterBack{
		background: linear-gradient(to bottom,rgba(2, 234, 188, 0.7),rgba(2, 234, 235, 0.8));
	}

	.backImg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 10;
		opacity: 1;
		transition: opacity 0.4s ease-in-out,
	}
	
	.backImgNot{
		opacity: 0;
	}

	.mineView {
		position: fixed;
		top: 60rpx;
		z-index: 20;
		width: 100%;
		height: calc(100vh - 200rpx);
		overflow: hidden;
	}
	
	.maieContent{
		position: fixed;
		top: 0rpx;
		z-index: 30;
		width: 100%;
		height: calc(100vh - 200rpx);
		/* background-color: rgba(0, 0, 0, 1); */
		overflow: hidden;
	}
	
	.mineHeader{
		position: relative;
		width: 100%;
		height: 120rpx;
		/* background-color: #5fff33; */
	}
	
	.mineCenter{
		position: relative;
		z-index: 25;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 25rpx;
		height: calc(100vh - 330rpx);
	}
	
	.blockAdd{
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		top: 40rpx;
		left: 30rpx;
		/* background-color: rgba(0, 0, 0, 0.5); */
	}
	
	.isaddStyle{
	  animation-name:isadd;
	  animation-duration:1s;
	  animation-iteration-count:1;
	  transition-timing-function: ease-out;
	  transform:rotateZ(45deg);
	}
	
	@keyframes isadd{
	  0%{transform:rotateZ(0deg);}
	  100%{transform:rotateZ(405deg);}
	}
	
	.noaddStyle{
	  animation-name:noadd;
	  animation-duration:0.8s;
	  animation-iteration-count:1;
	  transition-timing-function: ease-out;
	  /* transform:rotateZ(45deg) */
	}
	
	@keyframes noadd{
	  0%{transform:rotateZ(0deg);}
	  100%{transform:rotateZ(-360deg);}
	}
	
	.addView{
		position: absolute;
		z-index: 30;
		top: 66rpx;
		left: 56rpx;
		width: 0rpx;
		background-color: rgba(250, 250, 250, 1);
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		height: 0;
		padding: 0rpx;
		font-size: 0rpx;
		transition: height 0.4s ease-in-out, padding 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.25s ease-in-out, top 0.4s ease-in-out, left 0.4s ease-in-out;
	}
	
	.addView1{
		top: 110rpx;
		left: 30rpx;
		font-size: 36rpx;
		width: 300rpx;
		height:400rpx; 
		padding: 0rpx 20rpx;
	}
	
	.addView > view{
		width: 100%;
		height: 100rpx;
		font-weight: 600rpx;
		line-height: 100rpx;
		color: rgba(0, 0, 0, 0.9);
		/* letter-spacing: 1rpx; */
	}
	
	.addView > view:active{
		font-size: 40rpx;
		color: rgba(0, 0, 0, 1);
	}
	
	.addView > .addItem{
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}
</style>
